<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交易界面</title>
    <style>
        body{
            margin: 0;
        }
        header {
            border-bottom: 1px solid #e7e7e7;
            background-color: #00bae8;
        }
        header h1 {
            margin: 0;
            padding: 10px;
            text-align: center;
            font-size: 20px;
            font-weight: normal;
        }
        .header-right{
            position: absolute;
            top: 1px;
            right: 15px;
        }
        .footer {
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 4;
        }
        .footer .fonav {
            /*补充样式*/
            display: flex;
            justify-content: space-around;
            width: 100%;
            height: 50px;
            text-align: center;
            font-size: 12px;
            background: white;
            border-top: 1px solid #EEEDED;
        }
        .footer .footer-title {
            /*补充样式*/
            flex: 1;
            display: inline-block;
            color: #444444;
            padding: 30px 0 0 0;
        }
        .footer .footer0 {
            background: url(img/h1.png)no-repeat center 3px;
            background-size: 25px 25px;
        }
        .footer .footer1 {
            background: url(img/h2.png)no-repeat center 3px;
            background-size: 25px 25px;
        }
        .footer .footer2 {
            background: url(img/h3.png)no-repeat center 3px;
            background-size: 25px 25px;
        }
        .footer .footer3 {
            background: url(img/h4.png)no-repeat center 3px;
            background-size: 25px 25px;
        }
    </style>
</head>
<body>
<header>
    <h1>交易</h1>
    <div class="header-right">
        <img src="img/search.png" alt="">
    </div>
</header>
<article>
    <div id="main" style=" width: 600px;height:500px;"></div>
</article>

<footer class="footer">
    <div class="fonav">
        <a class="footer-title footer0 " href="./main.html">
            首页 </a>
        <a class="footer-title footer1 " href="./wallet.html">
            钱包 </a>
        <a class="footer-title footer2 " href="./market.html">
            交易 </a>
        <a class="footer-title footer3 " href="mine.html">
            我的 </a>
    </div>
</footer>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
<script src="sever/url.js"></script>
<script src="js/echarts.min.js"></script>
<script>
    var myChart = echarts.init(document.getElementById('main'));

   var option = {
        tooltip: {},
        xAxis: {
            //让x轴数据逆向
            // inverse:true,
            data: []
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    $.get(url+'api/news/market.html',
        function (res) {
            re=JSON.parse(res);
            // console.log(re.data.days);
            option.xAxis.data=re.data.days;
            option.series[{
                name:'用户数',
                type:'line',
                data:re.data.count
            }]
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        })


</script>
</html>